.root {
  --modal-size-xs: 320px;
  --modal-size-sm: 380px;
  --modal-size-md: 440px;
  --modal-size-lg: 620px;
  --modal-size-xl: 780px;
  --modal-size: var(--modal-size-md);

  --modal-y-offset: 5dvh;
  --modal-x-offset: 5vw;

  &[data-full-screen] {
    --modal-border-radius: 0 !important;

    .content {
      --modal-content-flex: 0 0 100%;
      --modal-content-max-height: auto;
      --modal-content-height: 100dvh;
    }

    .inner {
      --modal-inner-y-offset: 0;
      --modal-inner-x-offset: 0;
    }
  }

  &[data-centered] {
    .inner {
      --modal-inner-align: center;
    }
  }
}

.header {
  border-start-start-radius: var(--modal-radius, var(--mantine-radius-default));
  border-start-end-radius: var(--modal-radius, var(--mantine-radius-default));
}

.content {
  flex: var(--modal-content-flex, 0 0 var(--modal-size));
  max-width: 100%;
  max-height: var(--modal-content-max-height, calc(100dvh - var(--modal-y-offset) * 2));
  height: var(--modal-content-height, auto);
  overflow-y: auto;

  &[data-full-screen] {
    border-radius: 0;
  }

  &[data-hidden] {
    opacity: 0 !important;
    pointer-events: none;
  }
}

.inner {
  display: flex;
  justify-content: center;
  align-items: var(--modal-inner-align, flex-start);
  padding-top: var(--modal-inner-y-offset, var(--modal-y-offset));
  padding-bottom: var(--modal-inner-y-offset, var(--modal-y-offset));
  padding-inline: var(--modal-inner-x-offset, var(--modal-x-offset));
}
